<template>
  <div class="type">
      <!-- <yxzttype :closeList="closeList"/> -->
      <!-- <azsjtype :closeList="closeList"/> -->
    <div class="typeList" @click="yxzttype">
        <text class="text">运行状态</text><text class="allText">全部</text>
    </div>
    <div class="typeList" @click="azsjtype">
        <text class="text">安装时间</text><text class="allText">全部</text>
    </div>
    <wxc-mask width="500"
                height= '400'
                border-radius="0"
                duration="300"
                mask-bg-color="#FFFFFF"
                :overlay-can-close="true"
                :has-overlay="true"
                :show="yxzttypeshow"
                :has-animation="hasAnimation"
                @wxcMaskSetHidden="wxcMaskSetHidden">
                <p class="contItem" v-for="(item, ind) in runDatalist" :key="ind" @click="yxztChoice(runDatalist[ind], ind)">
                    <input type="radio" name="aa" class="input" :class="[activeIndex === ind ? 'activeInput' : '']" /><text class="listItem" :class="[activeIndex === ind ? 'active' : '']">{{item}}</text>
                </p>
    </wxc-mask>
    <wxc-mask width="500"
                height= '400'
                border-radius="0"
                duration="300"
                mask-bg-color="#FFFFFF"
                :overlay-can-close="true"
                :has-overlay="true"
                :show="azsjtypeshow"
                :has-animation="hasAnimation"
                @wxcMaskSetHidden="wxcMaskSetHidden">
                <p class="contItem" v-for="(item, ind) in timeDatalist" :key="ind" @click="azsjChoice(timeDatalist[ind], ind)">
                    <input type="radio" name="aa" class="input" :class="[activeIndex === ind ? 'activeInput' : '']" /><text class="listItem" :class="[activeIndex === ind ? 'active' : '']">{{item}}</text>
                </p>
    </wxc-mask>
  </div>
</template>
<script>
  import wxcMask from 'weex-ui/packages/wxc-mask'
  import event from '@/net/event'
  import store from '@/store/repairTask'
  export default {
    name: 'type',
    components: { 
        wxcMask
    },
    data () {
      return {
        timeDatalist: ['全部'],
        runDatalist: ['全部', '异常', '故障'],
        azsjtypeshow: false,
        yxzttypeshow: false,
        activeIndex: 0
      }
    },
    created() {
        this.getData()
    },
    methods: {
        getData(){
            for (let i = new Date().getFullYear(); i > 2015; i--) {
                this.timeDatalist.push(i)
            }
            this.timeDatalist = this.timeDatalist
        },
        yxzttype(){
            this.yxzttypeshow = true
        },
        azsjtype(){
            this.azsjtypeshow = true
        },
        yxztChoice(item, ind) {
            this.activeIndex = ind
            this.yxztshow = false
            store.commit('changeYxzt', item)
            store.dispatch('getAzddList', this)
            setInterval(() => {
                this.$emit('closeList')
            }, 200)
        },
        azsjChoice(item, ind){
            this.activeIndex = ind
            this.azsjshow = false
            store.commit('changeYear', item)
            store.dispatch('getAzddList', this)
            setInterval(() => {
                this.$emit('closeList')
            }, 200)
        },
        wxcMaskSetHidden () {
            this.azsjtypeshow = false
            this.yxzttypeshow = false
        }
    }
  }
</script>
<style scoped>
  .type{
    width: 750px;
    background-color: rgba(0, 0, 0, 0.4);
    flex: 1;
  }
  .typeList{
    width: 750px;
    background-color: white;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    height: 100px;
    padding: 0 20px;
  }
  .text {
    color:rgba(102,102,102,1);
  }
  .allText{
    font-size:29.1px;
    font-family:PingFangSC-Regular;
    color:rgba(62,175,252,1);
  }
  .contItem{
    width: 500px;
    height: 90px;
    border-bottom-color: #f5f5f5;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    padding-left: 20px;
  }
  .listItem{
    font-size:29.1px;
    font-family:PingFangSC-Regular;
    color:rgba(102,102,102,1);
}
.input{
    width: 25px;
    height: 25px;
    border-radius: 25%;
    border-color: rgba(151,151,151,1);
    border-style: solid;
    border-width: 1px;
    margin-right: 20px;
}
.activeInput{
    width: 25px;
    height: 25px;
    border-color: rgba(62,175,252,1);
    border-width: 7px;
    border-style: solid;
}
.active{
    color: rgba(62,175,252,1);
}
</style>